<template>
	<view>
		<view class="goodsData">
			<view class="imageBox">
				<image :src="shopInfo.logo" mode="aspectFill"></image>
			</view>
			<view class="shopInfoBox">
				<view class="shopInfo">
					<view class="overHidden">{{shopInfo.name}}</view>
					<view class="overHidden">{{shopInfo.address}}</view>
					<view class="overHidden">核销次数：{{orderTotal}} 次</view>
				</view>
				<view class="camera_input">
					<view style="width: calc(100% - 100rpx);">
						<uv-input placeholder="输入核销码" prefixIcon="search" @confirm="confirm()"
							prefixIconStyle="font-size: 22px;color: #909399"></uv-input>
					</view>
					<view class="camera">
						<image src="https://test.jhwl.site/static/img/scan.png" @click="cameraBen()"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="scrollTitle">核销记录</view>
		<view class="tipsBox" v-if="orderList.length <= 0">{{tipsText}}</view>
		<scroll-view class="scrollView" scroll-y="true" @scrolltolower="lower" v-else>
			<view class="shopList" v-for="(item,index) in orderList"
				:style="index == orderList.length - 1 ? 'border-bottom:0;':''">
				<view class="orderBox">
					<text>订单编号：</text>
					<text>{{item.order_id}}</text>
				</view>
				<view class="timeBox">
					<text>核销时间：</text>
					<text>{{item.verify_time}}</text>
				</view>
				<image :src="item.pics[0].image" mode="aspectFill"></image>
				<view class="shopContent">
					<view class="shopName">{{item.name}}</view>
					<view class="goodsPrice">
						<text>￥{{item.sell_price}}</text>
						<text style="margin-left:20rpx;">X{{item.num}}</text>
						<text style="color:#FC4C48;font-size:28rpx;margin-left:auto;">实付：￥{{item.amount}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="layer" v-show="layer == true"></view>
		<view class="writeOffLayer" v-show="layer == true">
			<view class="layerTitle">核 销 成 功</view>
			<view class="shopList">
				<view class="orderBox">
					<text>订单编号：</text>
					<text>{{writeOffData.order_id}}</text>
				</view>
				<view class="timeBox">
					<text>下单时间：</text>
					<text>{{writeOffData.payment_time}}</text>
				</view>
				<view style="width:100%;display: flex;">
					<image src="https://test.jhwl.site/static/img/QBBJ.png" mode="heightFix"></image>
					<view class="shopContent">
						<view class="shopName">{{writeOffData.name}}</view>
						<view class="goodsPrice">
							<text>￥{{writeOffData.sell_price}}</text>
							<text style="margin-left:20rpx;">X{{writeOffData.num}}</text>
							<text
								style="color:#FC4C48;font-size:28rpx;margin-left:auto;">实付：{{writeOffData.amount}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="layerBtn" @click="layerBtn()">确认 ( {{timeNum}} 秒后自动关闭 )</view>
		</view>

		<loading v-if="loading"></loading>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				loading: false,
				layer: false, //核销弹窗
				timeNum: 5, //核销弹窗关闭秒数
				page: 1, //当前页
				limit: 20, //每页条数
				totalPage: 0, //总页数
				orderList: [], //核销list
				shopInfo: {}, //商铺信息
				orderTotal: 0, //订单总数(核销次数)
				writeOffData: {}, //核销订单数据
				tipsText:'',//暂无记录提示语
			}
		},
		
		onLoad(query) {
			this.getShopDataFun();
			const sceneQ = decodeURIComponent(query.q);
			if(sceneQ == undefined || sceneQ == 'undefined'){
				return
			}else{
				console.log('开始核销');
				this.verifyFun(this,sceneQ.split('=')[1]);
			}
		},

		methods: {
			//确认事件
			layerBtn() {
				this.layer = false;
			},

			//输入框确认事件
			confirm(value) {
				this.verifyFun(this, value);
			},

			//打开扫一扫
			cameraBen() {
				let _this = this;
				uni.scanCode({
					success: function(res) {
						_this.verifyFun(_this, res.result.split('=')[1]);
					}
				})
			},

			//开始核销
			verifyFun(_this, code) {
				this.loading = true;
				this.writeOffData = {}; //清空核销订单数据
				app.post('ApiBusinessProduct/verify', {
					verify_code: code
				}, function(res) {
					_this.loading = false;
					if (res.status == 0) {
						app.alert(res.msg);
						return;
					} else {
						_this.timeNum = 5; //重置关闭核销弹窗时间
						_this.layer = true; //打开核销弹窗
						_this.orderList = [];//清空订单list 以免push重复数据
						_this.writeOffData = res.data;
						_this.timerFun();
						_this.getShopDataFun();
					}
				});
			},

			//关闭核销弹窗定时器
			timerFun() {
				let _this = this;
				let timer = setInterval(function() { //每秒减1
					_this.timeNum--;
				}, 1000);

				setTimeout(function() { //销毁定时器
					clearInterval(timer);
					_this.layer = false;
				}, _this.timeNum * 1000);
			},

			//获取商户数据
			getShopDataFun() {
				this.tipsText = '';
				this.loading = true;
				let _this = this;
				app.get('ApiBusinessProduct/getVerifyLog', {
					page: _this.page,
					limit: _this.limit
				}, function(res) {
					_this.loading = false;
					if (res.status == 0) {
						app.alert(res.msg);
						return;
					} else {
						_this.shopInfo = res.data.business;
						let list = res.data.order_list.data;
						_this.totalPage = res.data.last_page;
						_this.orderTotal = res.data.order_list.total;
						_this.tipsText = '暂无核销记录';
						list.forEach(item => {
							_this.orderList.push(item);
						})
					}
				});
			},

			//滚动到底部触发事件
			lower() {
				if (this.page < this.totalPage) {
					this.page++;
					this.getShopDataFun();
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: #f3f3f3;
	}

	.overHidden {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.goodsData {
		width: 94%;
		float: left;
		margin: 25rpx 3% 15rpx 3%;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
	}

	.imageBox {
		width: 250rpx;
		height: 250rpx;
	}

	.imageBox image {
		width: 100%;
		float: left;
		height: 100%;
		border-radius: 10rpx;
	}

	.shopInfoBox {
		width: calc(100% - 270rpx);
		float: left;
		margin-left: 20rpx;
	}

	.shopInfo {
		width: 100%;
		float: left;
		padding: 0 20rpx;
		font-size: 26rpx;
		line-height: 55rpx;
		/* font-weight: bold; */
		color: #6f6f6f;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.camera_input {
		width: 100%;
		float: left;
		margin-top: 15rpx;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
	}

	::v-deep .camera_input .uv-input {
		padding: 10rpx 20rpx !important;
	}

	::v-deep .uv-input__content__field-wrapper__field {
		height: 50rpx !important;
	}

	.camera image {
		width: 70rpx;
		height: 70rpx;
		margin-right: 10rpx;
		margin-top:1px;
	}

	.scrollView {
		width: 94%;
		margin-left: 3%;
		height: calc(100vh - 390rpx);
		float: left;
		font-size: 28rpx;
	}
	
	.tipsBox {
		width: 94%;
		margin-left: 3%;
		line-height: calc(100vh - 590rpx);
		float: left;
		font-size: 30rpx;
		font-weight: bold;
		letter-spacing: 1px;
		text-align: center;
		color:#b4b4b4;
	}

	.scrollTitle {
		width: 90%;
		margin: 0 5% 15rpx 5%;
		float: left;
		line-height: 60rpx;
		font-weight: bold;
		font-size: 30rpx;
	}

	.shopList {
		width: 100%;
		float: left;
		background-color: #fff;
		margin-bottom: 25rpx;
		padding: 30rpx 3% 25rpx 3%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.shopList image {
		width: 150rpx;
		height: 130rpx;
		border-radius: 10rpx;
	}

	.orderBox {
		width: 100%;
		float: left;

		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
	}

	.timeBox {
		width: 100%;
		float: left;
		margin: 25rpx 0 20rpx 0;
		border-bottom: 1px solid #f7f7f7;
		padding-bottom: 15rpx;
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
	}

	.shopContent {
		width: calc(100% - 170rpx);
		float: left;
		margin-left: 20rpx;
		font-size: 26rpx;
		color: #939393;
		line-height: 65rpx;
	}

	.shopName {
		font-weight: bold;
		color: #000;
		font-size: 28rpx;
	}

	.goodsPrice {
		width: 100%;
		float: left;
		display: flex;
		align-items: center;
	}

	.layer {
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		opacity: 0.7;
		background-color: #000;
		z-index: 999;
	}

	.writeOffLayer {
		width: 84%;
		height: 40vh;
		position: fixed;
		padding: 30rpx 2%;
		left: 8%;
		top: 30vh;
		background-color: #fff;
		border-radius: 15rpx;
		z-index: 1000;
	}

	.layerTitle {
		width: 100%;
		float: left;
		text-align: center;
		font-weight: bold;
		font-size: 32rpx;
		line-height: 70rpx;
	}

	.layerBtn {
		width: 90%;
		float: left;
		position: absolute;
		left: 5%;
		line-height: 80rpx;
		bottom: 35rpx;
		text-align: center;
		color: #fff;
		font-weight: bold;
		font-size: 30rpx;
		border-radius: 15rpx;
		background-color: #FC4C48;
	}
</style>